  @charset "UTF-8";
  
  html {  
        width: 100%;  
        margin: 0;  
        overflow: hidden;  
        font-family: 'Open Sans', sans-serif;  
        background: linear-gradient(to bottom, #663399, #212527);  
    	height: 100vh;
        display: flex;  
        justify-content: center;  
        align-items: center;  
    }  
  
  body {  
        width: 100%;  
        margin: 0;  
        overflow: hidden;  
        font-family: 'Open Sans', sans-serif;  
        background: linear-gradient(to bottom, #663399, #212528);  
        background-image: url('../image/image5.jpg'); 
    	background-repeat: no-repeat; 
    	background-size: cover; 
   		background-position: center center; 
    	height: 100vh;
        display: flex;  
        justify-content: center;  
        align-items: center;  
    }  
    @keyframes fadeIn {  

        0% {  

            opacity: 0;  

        }  

        100% {  

            opacity: 1;  

        }  

    }  

  

    #login {    

        width: 300px;    
        height: 300px;    
        display: flex;    
        flex-direction: column;    
        justify-content: center;    
        align-items: center;    
        padding: 20px;    
        box-sizing: border-box;    
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;   
   
          
    }
  
#login h1 {      

    color: #333333;  
    letter-spacing: 1px;   
    text-align: center;     
    margin-bottom: 20px;   
}
   input {  
    width: 100%;    
    padding: 10px;    
    font-size: 13px;    
    color: #000;  
    border: 1px solid #312E3D;    
    border-bottom: 1px solid #56536A;    
    border-radius: 4px;    
    background-color: #fff; 
    margin-bottom: 10px;    
    box-sizing: border-box;  
}
  
    .but {  
        width: 100%; 
        padding: 10px 0; 
        font-size: 15px;  
        line-height: normal;  
        border-radius: 5px;  
        background-color: #4a77d4;  
        border: none;  
        color:white;  
        cursor: pointer; 
        transition: background-color 0.3s ease; 
    }  
  
    .but:hover {  
        background-color: #3762bc; 
    } 